<template>
  <div>
    <e-searchPane
      type="simple"
      close-height="6rem"
      @toSearch="toSearch"
      @toReset="toReset"
    >
      <div class="demo-wrapper-simple">
        <div class="simple">
          <span>云主机编码</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>内网IP</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>云主机名称</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>公网IP</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>内网名称</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>外网IP</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>外网名称</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
        <div class="simple">
          <span>公网名称</span>
          <e-input placeholder="请输入"> </e-input>
        </div>
      </div>
    </e-searchPane>
  </div>
</template>
<script>
export default {
  name: 'DemoSearchPaneSimple',
  methods: {
    toSearch() {
      this.$Modal.info({
        title: '点击了搜索按钮',
        content: '',
        onOk: () => {
          this.$Message.info('You click ok')
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel')
        },
      })
    },
    toReset() {
      this.$Modal.info({
        title: '点击了重置按钮',
        content: '',
        onOk: () => {
          this.$Message.info('You click ok')
        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel')
        },
      })
    },
  },
}
</script>

<style lang="less">
.demo-wrapper-simple {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  .simple {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    width: 33%;
    span {
      margin-left: 10px;
      margin-right: 5px;
      font-size: 12px;
      width: 100px;
      text-align: center;
    }
  }
}
</style>
